<template>
    <div>
<!--            <el-menu default-active="2"-->
<!--                    class="el-menu-vertical-demo"-->
<!--                    style="width: 200px; min-height: calc(100vh - 50px)"-->
<!--            >-->
            <div style="width: 200px;padding-left: 70px; padding-top: 20px; font-weight: bold;color: #99ccff;font-size:18px">关联查询</div>
            <br/>
                <el-autocomplete
                        class="inline-input"
                        v-model="inputS"
                        :fetch-suggestions="querySearch"
                        :trigger-on-focus="false"
                        placeholder="请输入源节点"
                        @select="handleSubmit"
                        style="width: 150px; margin-left: 30px"
                ></el-autocomplete>
                <br/>
                <br/>
                <el-autocomplete
                        class="inline-input"
                        v-model="inputT"
                        :fetch-suggestions="querySearch"
                        :trigger-on-focus="false"
                        placeholder="请输入目标节点"
                        @select="handleSubmit"
                        style="width: 150px; margin-left: 30px"
                ></el-autocomplete>
                <br/>
                <br/>
                <el-button type="primary" color="#53a8ff" style="width: 150px; margin-left: 30px" @click="searchNode()">
                    <el-icon color="#ffffff" style="vertical-align: middle;" size="large"><search /></el-icon>
                    <span style="vertical-align: middle;color:#ffffff"> 搜索 </span>
                </el-button>
              <div style="width: 180px;padding-left: 55px; padding-top: 50px; font-weight: bold;color:#99ccff;font-size:18px">一阶邻居查询</div>
                <br/>
                <el-autocomplete
                                class="inline-input"
                                v-model="inputN"
                                :fetch-suggestions="querySearch"
                                :trigger-on-focus="false"
                                placeholder="请输入节点"
                                @select="handleSubmit"
                                style="width: 150px;margin-left: 30px"
                        ></el-autocomplete>
                <br/>
                <br/>
                <el-select v-model="value" placeholder="选择邻居" style="width: 150px;margin-left: 30px" size="large" >
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                    />
                </el-select>
                <br/>
                <br/>
             <el-button type="primary" color="#53a8ff" style="width: 150px; margin-left: 30px" @click="searchNeighbor()" >
                 <el-icon color="#ffffff" style="vertical-align: middle;" size="large"><search /></el-icon>
                <span style="vertical-align: middle; color: #ffffff;font-size: 14px"> 搜索 </span>
             </el-button>
    </div>
</template>

<script>
    import {
        Location,
        Document,
        Menu as IconMenu,
        Setting,
        Delete,
        Edit,
        Search,
        Share,
        Upload
    } from '@element-plus/icons-vue'
    import bus from '../utils/bus'
    import names from './txtToJson.json'
    export default {
        name: "Aside",
        data() {
            return {
                inputS:"",
                inputT:"",
                inputN:"",
                options : [
                    {
                        value: '一阶出度邻居',
                        label: '一阶出度邻居',
                    },
                    {
                        value: '一阶入度邻居',
                        label: '一阶入度邻居',
                    },
                ],
                value:'',
                flag:''
            }
        },
        components: {
            Location,
            Document,
            Setting,
            IconMenu,
        },
        methods: {
            searchNode: function () {
                console.log(this.inputS)
                console.log(this.inputT)
                var url = '/api/graph/getNodes/' // 这里就是刚才的config/index.js中的/api
                this.axios.get(url + this.inputS + '/' + this.inputT).then(response => {
                    // console.log(response)
                    bus.emit('sendBybus', response.data)
                }).catch(error => {
                    console.log(error);
                    }
                )
            },
            searchNeighbor: function () {
                console.log(this.inputN)
                if (this.value == "一阶出度邻居")
                    this.flag = 'out'
                else
                    this.flag = 'in'
                console.log(this.flag)
                var url = '/api/graph/getNeighbors/' // 这里就是刚才的config/index.js中的/api
                this.axios.get(url + this.inputN + '/' + this.flag).then(response => {
                     console.log(response.data)
                    bus.emit('sendBybus', response.data)
                }).catch(error => {
                        console.log(error);
                    }
                )
            },
            querySearch(queryString, cb) {
                //需要搜索建议的列表
                let results = names;
                console.log(results)
                results = queryString
                    ? results.filter(this.createFilter(queryString))
                    : results;
                //cb是回调函数，返回筛选出的结果数据到输入框下面的输入列表
                cb(results);
            },
            //这是当输入数据时触发的，筛选出和输入数据匹配的建议输入。
            //我这里用的是调用match方法，是模糊匹配；官方调用的是indexOf，是精确匹配
            createFilter(queryString) {
                return (item) => {
                    return item.value.toUpperCase().match(queryString.toUpperCase());
                };
            },
            handleSubmit(item) {
                console.log(item);
            }
        }
    }
</script>

